<template>
  <div class="box_pagination" :style="{height:height}">
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="paginationfrom.pageNumber"
            :page-size="paginationfrom.pageSize"
            :total="paginationfrom.total"
            :layout="layout"
            :page-sizes="sizes"
    >
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name:'syxPagination',
    props: {
      /**
       * 高度
       */
      height: {
        type: String,
        default: () => "10%"
      },
      /**
       * 条数下拉
       */
      sizes: {
        type: Array,
        default: () => [10, 50, 100, 200]
      },
      /**
       * 条数下拉
       */
      layout: {
        type: String,
        default: () => 'total, sizes, prev, pager, next, jumper'
      },
      /**
       * 分页
       */
      paginationfrom: {
        type: Object,
        default: () => ({
          pageSize: 0,
          pageNumber: 0,
          total: 0
        })
      }
    },
    methods: {
      /**
       * 每页条数
       * @param val
       */
      handleSizeChange(val) {
        this.$emit("handleSizeChange", val);
      },
      /**
       * 当前页
       * @param val
       */
      handleCurrentChange(val) {
        this.$emit("handleCurrentChange", val);
      }
    }
  }
</script>

<style>
  .box_pagination {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
